<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>amStock Example</title>
		<link rel="stylesheet" href="../amcharts/style.css" type="text/css">

		<script src="../amcharts/amcharts.js" type="text/javascript"></script>
		<script src="../amcharts/serial.js" type="text/javascript"></script>
		<script src="../amcharts/amstock.js" type="text/javascript"></script>

		<script>
			var chartData = generateChartData();

			function generateChartData() {
				var chartData = [];
				var firstDate = new Date(2012, 0, 1);
				firstDate.setDate(firstDate.getDate() - 1000);
				firstDate.setHours(0, 0, 0, 0);

				for (var i = 0; i < 1000; i++) {
					var newDate = new Date(firstDate);
					newDate.setHours(0, i, 0, 0);

					var a = Math.round(Math.random() * (40 + i)) + 100 + i;
					var b = Math.round(Math.random() * 100000000);

					chartData.push({
						date: newDate,
						value: a,
						volume: b
					});
				}
				return chartData;
			}

			var chart = AmCharts.makeChart("chartdiv", {

					type: "stock",

					categoryAxesSettings: {
						minPeriod: "mm"
					},

					dataSets: [{
						color: "#b0de09",
						fieldMappings: [{
							fromField: "value",
							toField: "value"
						}, {
							fromField: "volume",
							toField: "volume"
						}],

						dataProvider: chartData,
						categoryField: "date"
					}],


					panels: [{
							showCategoryAxis: false,
							title: "Value",
							percentHeight: 70,

							valueAxes:[{
									id:"v1"
								}
							],

							stockGraphs: [{
								id: "g1",
								valueField: "value",
								type: "smoothedLine",
								lineThickness: 2,
								bullet: "round"
							}],

							stockLegend: {
								valueTextRegular: " ",
								markerType: "none"
							}
						},



						{
							title: "Volume",
							percentHeight: 30,

							stockGraphs: [{
								valueField: "volume",
								type: "column",
								cornerRadiusTop: 2,
								fillAlphas: 1
							}],

							stockLegend: {
								valueTextRegular: " ",
								markerType: "none"
							}
						}
					],

					chartScrollbarSettings: {
						graph: "g1",
						usePeriod: "10mm",
						position: "top",
						updateOnReleaseOnly:false
					},

					chartCursorSettings: {
						valueBalloonsEnabled: true,
						valueLineBalloonEnabled:true,
						valueLineEnabled:true
					},

					periodSelector: {
						position: "bottom",
						dateFormat: "YYYY-MM-DD HH:NN",
						inputFieldWidth: 150,
						periods: [{
							period: "hh",
							count: 1,
							label: "1 hour",
							selected: true

						}, {
							period: "hh",
							count: 2,
							label: "2 hours"
						}, {
							period: "hh",
							count: 5,
							label: "5 hour"
						}, {
							period: "hh",
							count: 12,
							label: "12 hours"
						}, {
							period: "MAX",
							label: "MAX"
						}]
					},

					panelsSettings: {
						usePrefixes: true
					}
				});

		</script>
	</head>
	<body style="background-color:#FFFFFF">
		<div id="chartdiv" style="width:100%; height:600px;"></div>
	</body>

</html>